<template>
  <div class="box">
    <img src="@/assets/images/bg.jpg" alt="" class="box-bg" />
    <!--<div class="loading">-->
    <!--  <div class="loadbox"><img src="@/assets/images/loading.gif" /> 页面加载中...</div>-->
    <!--</div>-->
    <div class="head">
      <h1>社会组织监管一件事数据可视化平台</h1>
      <div class="weather">
        <!--<img src="@/assets/images/weather.png" /><span>多云转小雨</span>-->
        <span>{{ getDate }}</span>
      </div>
    </div>
    <div class="mainbox">
      <ul class="clearfix">
        <li>
          <div class="boxall" style="height: 1.8rem">
            <div class="alltitle">登记管理</div>

            <div class="sycm registrationManagement">
              <ul class="clearfix">
                <li>
                  <h2>{{ info.v1.alls }}</h2>
                  <div>登记注册</div>
                </li>
                <li>
                  <h2>{{ info.v1.logout }}</h2>
                  <div>已注销</div>
                </li>
                <li>
                  <h2>{{ info.v1.back }}</h2>
                  <div>已撤销</div>
                </li>
              </ul>
              <ul class="clearfix">
                <li>
                  <h2>{{ info.v1.uses }}</h2>
                  <div>登记在册</div>
                </li>
                <li>
                  <h2>{{ info.v1.st }}</h2>
                  <div>社会团体</div>
                </li>
                <li>
                  <h2>{{ info.v1.mf }}</h2>
                  <div>民办非企业</div>
                </li>
              </ul>
            </div>
            <div class="boxfoot"></div>
          </div>
          <div class="boxall" style="height: 2.4rem">
            <div class="alltitle">年度检查</div>

            <div class="annualInspections">
              <ul>
                <li>
                  <h2>{{ annualCheckData['应参检'] || 0 }}</h2>
                  <span>应参检</span>
                </li>
                <li>
                  <h2>{{ annualCheckData['已参检'] || 0 }}</h2>
                  <span>已参检</span>
                </li>
                <li>
                  <h2>{{ annualCheckData['未参检'] || 0 }}</h2>
                  <span>未参检</span>
                </li>
                <li>
                  <h2>{{ annualCheckData['年检合格'] || 0 }}</h2>
                  <span>年检合格</span>
                </li>
                <li>
                  <h2>{{ annualCheckData['基本合格'] || 0 }}</h2>
                  <span>基本合格</span>
                </li>
                <li>
                  <h2>{{ annualCheckData['不合格'] || 0 }}</h2>
                  <span>不合格</span>
                </li>
              </ul>
            </div>
            <div class="boxfoot"></div>
          </div>
          <div class="boxall" style="height: 2.4rem; cursor: pointer">
            <div class="alltitle">党建工作</div>
            <div class="boxall-statistics">
              <div class="boxall-statistics-item">
                <div class="boxall-statistics-title">应成立党组织</div>
                <div class="boxall-statistics-c">
                  <div class="boxall-statistics-c-tx">60</div>
                </div>
              </div>
              <div class="boxall-statistics-item">
                <div class="boxall-statistics-title">已成立党组织</div>
                <div class="boxall-statistics-c">
                  <div class="boxall-statistics-c-tx">60</div>
                </div>
              </div>
              <div class="boxall-statistics-item">
                <div class="boxall-statistics-title">未成立党组织</div>
                <div class="boxall-statistics-c">
                  <div class="boxall-statistics-c-tx">438</div>
                </div>
              </div>
            </div>
            <div class="boxall-statistics">
              <div class="boxall-statistics-item">
                <div class="boxall-statistics-title">应配备党建联络员</div>
                <div class="boxall-statistics-c">
                  <div class="boxall-statistics-c-tx">277</div>
                </div>
              </div>
              <div class="boxall-statistics-item">
                <div class="boxall-statistics-title">已配备党建联络员</div>
                <div class="boxall-statistics-c">
                  <div class="boxall-statistics-c-tx">216</div>
                </div>
              </div>
              <div class="boxall-statistics-item">
                <div class="boxall-statistics-title">未配备党建联络员</div>
                <div class="boxall-statistics-c">
                  <div class="boxall-statistics-c-tx">61</div>
                </div>
              </div>
            </div>
          </div>
          <div class="boxall" style="height: 3.1rem">
            <div class="alltitle">活动宣传</div>
            <div class="sycm" style="padding: 0.1rem 0">
              <ul class="clearfix">
                <li>
                  <h2>{{ publicizeData.activeCount || 0 }}</h2>
                  <span>活动上传</span>
                </li>
                <li>
                  <h2>{{ publicizeData.publicizeCount || 0 }}</h2>
                  <span>宣传报道</span>
                </li>
                <li>
                  <h2>{{ publicizeData.recognitionCount || 0 }}</h2>
                  <span>荣誉表彰</span>
                </li>
              </ul>
            </div>
            <div class="wrap-header">
              <div class="wrap-header-num">排名</div>
              <div class="wrap-header-label">社会组织名称</div>
              <div class="wrap-header-num">活动数量</div>
            </div>
            <div
              :class="{ wrap: true, hideTheScrollbar: hideTheScrollbar }"
              @mouseenter="handleMouseEnter"
              @mouseleave="handleMouseLeave"
            >
              <ul>
                <li v-for="(it, index) in dzData1" :key="it">
                  <p class="wrap-num" style="height: 100%">
                    <img
                      src="@/assets/images/popup/p1.png"
                      v-if="index === 0"
                    />
                    <img
                      src="@/assets/images/popup/p2.png"
                      v-else-if="index === 1"
                    />
                    <img
                      src="@/assets/images/popup/p3.png"
                      v-else-if="index === 2"
                    />
                    <span v-else>{{ index + 1 }}</span>
                  </p>
                  <p class="wrap-label">{{ it.name }}</p>
                  <p class="wrap-num">
                    <text>{{ it.value ?? '/' }}</text>
                  </p>
                </li>
              </ul>
            </div>
            <div class="boxfoot"></div>
          </div>
        </li>
        <li>
          <div class="boxall" style="height: 1.8rem">
            <div class="alltitle">监管绩效</div>

            <div class="sycm regulatoryPerformance">
              <ul class="clearfix">
                <li>
                  <h2>
                    {{
                      countHttpData?.annualRate
                        ? Number(countHttpData?.annualRate) * 100
                        : 0
                    }}%
                  </h2>
                  <span>年检率</span>
                </li>
                <li>
                  <h2>
                    {{
                      countHttpData?.passRate
                        ? Number(countHttpData?.passRate) * 100
                        : 0
                    }}%
                  </h2>
                  <span>年检合格率</span>
                </li>
                <li>
                  <h2>{{ countHttpData.avgTimely }}</h2>
                  <span>年检平均办结时间</span>
                </li>
              </ul>
              <ul class="clearfix">
                <li
                  style="
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-direction: column;
                  "
                >
                  <h2>
                    {{
                      countHttpData?.coverageRate
                        ? (Number(countHttpData?.coverageRate) * 100).toFixed(0)
                        : 0
                    }}%
                  </h2>
                  <span>党建工作覆盖率</span>
                </li>
                <li>
                  <h2>{{ dpcontV2Data }}%</h2>
                  <span>预警信息处置率</span>
                </li>
                <li>
                  <h2>
                    {{
                      countHttpData?.standardRate
                        ? (Number(countHttpData?.standardRate) * 100).toFixed(0)
                        : 0
                    }}%
                  </h2>
                  <span>综合评价达标率</span>
                </li>
              </ul>
            </div>
            <div class="boxfoot"></div>
          </div>
          <div class="map">
            <div class="map-bg"></div>
            <div class="map-m">
              <Map @changeRelInfo="changeRelInfo" />
            </div>
          </div>
        </li>
        <li>
          <div
            class="boxall"
            style="height: 2rem; cursor: pointer"
            @click="open('classificationOfEarlyWarnings')"
          >
            <div class="alltitle">风险预警分类</div>
            <!--<div class="sy" id="echarts1"></div>-->
            <!--<div class="sy" id="echarts2"></div>-->
            <!--<div class="sy" id="echarts3"></div>-->
            <!--<div class="boxfoot"></div>-->
            <div class="riskWarningClassification">
              <ul>
                <li>
                  <h2>
                    <div>{{ info.v2.one }}</div>
                  </h2>
                  <div class="riskWarningClassification-tx">1级风险</div>
                </li>
                <li>
                  <h2>
                    <div>{{ info.v2.two }}</div>
                  </h2>
                  <div class="riskWarningClassification-tx">2级风险</div>
                </li>
                <li>
                  <h2>
                    <div>{{ info.v2.three }}</div>
                  </h2>
                  <div class="riskWarningClassification-tx">3级风险</div>
                </li>
              </ul>
              <ul>
                <li>
                  <h2>
                    <div>{{ info.v3.one }}</div>
                  </h2>
                  <div class="riskWarningClassification-tx">低风险社会组织</div>
                </li>
                <li>
                  <h2>
                    <div>{{ info.v3.two }}</div>
                  </h2>
                  <div class="riskWarningClassification-tx">中风险社会组织</div>
                </li>
                <li>
                  <h2>
                    <div>{{ info.v3.three }}</div>
                  </h2>
                  <div class="riskWarningClassification-tx">高风险社会组织</div>
                </li>
              </ul>
            </div>
          </div>
          <div class="boxall" style="height: 1.6rem">
            <div class="alltitle">风险处置</div>

            <div class="riskDisposal">
              <ul>
                <li>
                  <div class="imgs">
                    <img src="@/assets/images/响应处置.png" alt="" />
                  </div>
                  <div class="riskDisposal-r">
                    <h2>{{ info.v4.one }}</h2>
                    <div>应处置风险</div>
                  </div>
                </li>
                <li>
                  <div class="imgs">
                    <img src="@/assets/images/已处置.png" alt="" />
                  </div>
                  <div class="riskDisposal-r">
                    <h2>{{ info.v4.two }}</h2>
                    <div>已处置风险</div>
                  </div>
                </li>
                <li>
                  <div class="imgs">
                    <img src="@/assets/images/未处置.png" alt="" />
                  </div>
                  <div class="riskDisposal-r">
                    <h2>{{ info.v4.three }}</h2>
                    <div>未处置风险</div>
                  </div>
                </li>
                <li>
                  <div class="imgs">
                    <img src="@/assets/images/响应处置.png" alt="" />
                  </div>
                  <div class="riskDisposal-r">
                    <h2>{{ info.v5.one }}</h2>
                    <div>应处置社会组织</div>
                  </div>
                </li>
                <li>
                  <div class="imgs">
                    <img src="@/assets/images/已处置.png" alt="" />
                  </div>
                  <div class="riskDisposal-r">
                    <h2>{{ info.v5.two }}</h2>
                    <div>已处置社会组织</div>
                  </div>
                </li>
                <li>
                  <div class="imgs">
                    <img src="@/assets/images/未处置.png" alt="" />
                  </div>
                  <div class="riskDisposal-r">
                    <h2>{{ info.v5.three }}</h2>
                    <div>未处置社会组织</div>
                  </div>
                </li>
              </ul>
            </div>
            <div class="boxfoot"></div>
          </div>

          <div class="boxall" style="height: 2.45rem; cursor: pointer">
            <div class="alltitle">抽查检查</div>
            <div class="boxall-statistics">
              <div class="boxall-statistics-item">
                <div class="boxall-statistics-title">检查数量</div>
                <div class="boxall-statistics-c">
                  <div class="boxall-statistics-c-tx">{{ info.v6.one }}</div>
                </div>
              </div>
              <div class="boxall-statistics-item">
                <div class="boxall-statistics-title">书面检查</div>
                <div class="boxall-statistics-c">
                  <div class="boxall-statistics-c-tx">{{ info.v6.two }}</div>
                </div>
              </div>
              <div class="boxall-statistics-item">
                <div class="boxall-statistics-title">实地检查</div>
                <div class="boxall-statistics-c">
                  <div class="boxall-statistics-c-tx">{{ info.v6.three }}</div>
                </div>
              </div>
            </div>
            <div class="boxall-statistics">
              <div class="boxall-statistics-item">
                <div class="boxall-statistics-title">发现问题</div>
                <div class="boxall-statistics-c">
                  <div class="boxall-statistics-c-tx">{{ info.v7.one }}</div>
                </div>
              </div>
              <div class="boxall-statistics-item">
                <div class="boxall-statistics-title">已整改问题</div>
                <div class="boxall-statistics-c">
                  <div class="boxall-statistics-c-tx">{{ info.v7.two }}</div>
                </div>
              </div>
              <div class="boxall-statistics-item">
                <div class="boxall-statistics-title">未整改问题</div>
                <div class="boxall-statistics-c">
                  <div class="boxall-statistics-c-tx">{{ info.v7.three }}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="boxall" style="height: 3.65rem; cursor: pointer">
            <div class="alltitle">综合评价</div>
            <div class="sy" id="organizationalScoring"></div>
            <div class="boxall-teble">
              <table>
                <thead>
                  <tr>
                    <td width="15%">
                      <div>排名</div>
                    </td>
                    <td width="55%"><div>主管部门</div></td>
                    <td width="30%"><div>达标率</div></td>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(it, index) in rankingHttpData">
                    <td>
                      <div>
                        <img
                          src="@/assets/images/popup/p1.png"
                          v-if="index === 0"
                        />
                        <img
                          src="@/assets/images/popup/p2.png"
                          v-else-if="index === 1"
                        />
                        <img
                          src="@/assets/images/popup/p3.png"
                          v-else-if="index === 2"
                        />
                        <span v-else>{{ index + 1 }}</span>
                      </div>
                    </td>
                    <td>
                      <div>{{ it.supervisoryUnit || '' }}</div>
                    </td>
                    <td>
                      <div>{{ it.standardRate || 0 }}%</div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </li>
      </ul>
      <!-- 社会组织数量 -->
      <numberOfSocialOrganizations
        ref="numberOfSocialOrganizationsRef"
        v-if="visible.numberOfSocialOrganizations"
        @close="close"
        :current="current"
      />
      <!-- 社会组织数量 -->
      <classificationOfEarlyWarnings
        ref="classificationOfEarlyWarningsRef"
        v-if="visible.classificationOfEarlyWarnings"
        @close="close"
      />
      <!-- 社会组织信息 -->
      <organizationalInformation
        ref="organizationalInformationRef"
        v-if="visible.organizationalInformation"
        @close="close"
      />
    </div>
    <el-dialog
      width="70%"
      v-model="formVisible"
      title="风险预警管理"
      @close="formCancel"
    >
      <div class="tree-box">
        <!--<MForm-->
        <!--  :fields="fields"-->
        <!--  @submit="search"-->
        <!--  @cancel="search"-->
        <!--  class="search"-->
        <!--  submitIcon="icon-search"-->
        <!--  cancelIcon="icon-refreshLeft"-->
        <!--&gt;-->
        <!--  &lt;!&ndash;<template #extra>&ndash;&gt;-->
        <!--  &lt;!&ndash;  <el-button type="primary" @click="exportHtmlToWord">导出</el-button>&ndash;&gt;-->
        <!--  &lt;!&ndash;</template>&ndash;&gt;-->
        <!--</MForm>-->

        <MTable
          :columns="columns"
          :http="riskList"
          :params="params"
          v-model:isReload="isReload"
          v-model:selectKeys="selectKeys"
          displayFormat="list"
          rowKey="sorgRiskId"
          height="500px"
        >
          <template #风险级别="{ row }">
            <img
              src="@/assets/imgs/spotCheck/y1.png"
              class="grade"
              v-if="row.riskLevel === '一级'"
            />
            <img
              src="@/assets/imgs/spotCheck/y2.png"
              class="grade"
              v-if="row.riskLevel === '二级'"
            />
            <img
              src="@/assets/imgs/spotCheck/y3.png"
              class="grade"
              v-if="row.riskLevel === '三级'"
            />
          </template>
          <template #状态="{ row }">
            <div class="tag-status" v-if="row.state === 2">
              <span class="error">协同处理</span>
            </div>
            <div class="tag-status" v-if="row.state === 0">
              <span class="warning">待处理</span>
            </div>
            <div class="tag-status" v-if="row.state === 1">
              <span class="">已处理</span>
            </div>
          </template>
        </MTable>
      </div>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, onBeforeUnmount, ref, nextTick } from 'vue'
import numberOfSocialOrganizations from './popup/numberOfSocialOrganizations.vue'
import classificationOfEarlyWarnings from './popup/classificationOfEarlyWarnings.vue'
import organizationalInformation from './popup/organizationalInformation.vue'
import { columns, fields, dialogFields } from './config'
import { days } from './config'
import {
  useWarningCategoryChart,
  useIndustryChart,
  useOrganizationChart,
  useOrganizationalScoring
} from './charts'
import {
  portrait,
  dpcontRisk,
  dpcontTodayAdd,
  riskCount,
  riskTypeSortRisk,
  statistics,
  statisticsRight,
  riskList,
  actSort,
  dpcont,
  rankingHttp,
  countHttp,
  dpcontV2,
  publicize,
  annualCheck
} from '@/api/spotCheck/spotCheck'
import Map from './charts/map/map.vue'

const formVisible = ref(false)
const openRiskWarning = (name) => {
  params.value.riskType = name
  formVisible.value = true
}

interface Info {
  v1: {
    alls: number
    logout: number
    back: number
    uses: number
    st: number
    mf: number
  }
  v2: {
    one: number
    two: number
    three: number
  }
  v3: {
    one: number
    two: number
    three: number
  }
  v4: {
    one: number
    two: number
    three: number
  }
  v5: {
    one: number
    two: number
    three: number
  }
  v6: {
    one: number
    two: number
    three: number
  }
  v7: {
    one: number
    two: number
    three: number
  }
}

const info = ref<Info>({
  v1: {
    alls: 0,
    logout: 0,
    back: 0,
    uses: 0,
    st: 0,
    mf: 0
  },
  v2: {
    one: 0,
    two: 0,
    three: 0
  },
  v3: {
    one: 0,
    two: 0,
    three: 0
  },
  v4: {
    one: 0,
    two: 0,
    three: 0
  },
  v5: {
    one: 0,
    two: 0,
    three: 0
  },
  v6: {
    one: 0,
    two: 0,
    three: 0
  },
  v7: {
    one: 0,
    two: 0,
    three: 0
  }
})

interface RankingHttp {
  standardRate: number
  supervisoryUnit: string
}

interface PublicizeData {
  activeCount: string
  publicizeCount: string
  recognitionCount: string
}

const rankingHttpData = ref<RankingHttp[]>([])

const countHttpData = ref({})

const dpcontV2Data = ref(0)

const publicizeData = ref<PublicizeData>({
  activeCount: '',
  publicizeCount: '',
  recognitionCount: ''
})

const annualCheckData = ref({})

onMounted(async () => {
  //问题类型
  // getManagerChild('theTypeOfProblemRisk').then((res) => {
  //   fields.value.find((i) => i.key === 'riskType').attrs.options = res.data.map(
  //     (i) => ({
  //       value: i.name,
  //       label: i.name,
  //       riskLevel: i.relationParameterName
  //     })
  //   )
  // })
  riskTypeSortRisk().then((res) => {
    fields.value.find((i) => i.key === 'riskType').attrs.options = res.data.map(
      (i) => ({
        value: i.name,
        label: i.name
      })
    )
  })
  dpcont().then((res) => {
    info.value = res.data
  })

  rankingHttp().then((res) => {
    rankingHttpData.value = res.data.map((i) => {
      return {
        standardRate: i?.standardRate ? Number(i?.standardRate) * 100 : 0,
        supervisoryUnit: i.supervisoryUnit
      }
    })
  })

  countHttp().then((res) => {
    countHttpData.value = res.data
  })

  dpcontV2().then((res) => {
    dpcontV2Data.value = res.data ?? 0
  })

  //活动宣传
  publicize().then((res) => {
    publicizeData.value = res.data
  })

  //年度检查
  annualCheck().then((res) => {
    //publicizeData.value = res.data
    annualCheckData.value = res.data.data
  })
})

// 删除
const selectKeys = ref<number[]>([])
const clearSelectKeysReload = () => {
  selectKeys.value = []
  reload()
}

// 重载
const isReload = ref(true)
const reload = () => {
  isReload.value = true
}
// 搜索
const params = ref<any>({})
const search = (data: any) => {
  params.value = {
    ...params.value,
    ...data
  }
}

const getDate = ref('')
const now = new Date()
// 获取年
const year = now.getFullYear()
// 获取月（注意：getMonth() 返回的月份是从 0 开始的，所以需要加 1）
const month = now.getMonth() + 1
// 获取日
const day = now.getDate()
// 将年、月、日组合成一个字符串
const currentDate = `${year}年${month.toString().padStart(2, '0')}月${day
  .toString()
  .padStart(2, '0')}日`
getDate.value = currentDate
console.log(currentDate) // 输出格式为 "YYYY-MM-DD"
const dzData = ref([])
const dzData1 = ref([])
const dzData2: any = ref([])
actSort().then((res) => {
  dzData.value = res.data.map((i) => ({
    name: i.orgName,
    value: i.ac
  }))
  dzData1.value = dzData.value.slice(0, 5)
  // dzData2.value = dzData.value.slice(5)
  dzData2.value = [
    {
      value: '90',
      name: '云阳县文化旅游委'
    },
    {
      value: '86',
      name: '云阳县委统战部'
    },
    {
      value: '60',
      name: '云阳县商务委'
    },
    {
      value: '60',
      name: '云阳县教委'
    },
    {
      value: '60',
      name: '云阳县农业农村委'
    }
  ]
})

const scrollAnimeState: Record<string, any> = {
  wrapTimer: null,
  addUserTimer: null
}

const setDays = (d) => {
  days.value = d
}

const changeRelInfo = (e) => {
  console.log('e', e)
  if (e.id === '青龙街道') {
    current.value = e.id
    open('numberOfSocialOrganizations')
  }
}
const visible = ref({
  numberOfSocialOrganizations: false,
  classificationOfEarlyWarnings: false,
  organizationalInformation: false
})

const current = ref('')
const open = (name, query?: any) => {
  for (var i in visible.value) {
    visible.value[i] = false
  }
  visible.value[name] = true
}

const close = (e) => {
  for (var i in visible.value) {
    visible.value[i] = false
  }
}
const setHtmlFontSize = () => {
  // const viewportWidth = window.innerWidth
  // const viewportHeight = window.innerHeight
  //
  // // 计算根字体大小为视口宽度或高度的某个百分比
  // // 这里使用宽度的 10% 作为示例
  // const fontSize = Math.min(viewportWidth, viewportHeight) * 0.1
  // document.documentElement.style.fontSize = fontSize + 'px'
  // console.log('fontSize', fontSize)
  const viewportWidth = window.innerWidth
  const viewportHeight = window.innerHeight
  const aspectRatio = viewportWidth / viewportHeight

  let fontSize
  if (aspectRatio === 16 / 9) {
    fontSize = viewportWidth / 20 // 16:9 比例下的字体大小
  } else {
    fontSize = viewportWidth / 22 // 其他比例下的字体大小
  }

  const whei = window.innerWidth
  document.documentElement.style.fontSize = whei / 20 + 'px'
}
// 在组件卸载之前执行函数
onBeforeUnmount(() => {
  document.documentElement.style.fontSize = 'unset'
})

useWarningCategoryChart()
useIndustryChart()
useOrganizationChart()
useOrganizationalScoring()

const statisticsData = ref('')
const riskWarning = ref([])
const toDayList = ref([])
const statisticsRightData = ref({})
onMounted(() => {
  setHtmlFontSize()
  // initWrapScrollAnime()
  //initAddUserScrollAnime()

  window.addEventListener('resize', setHtmlFontSize)

  statistics().then((res) => {
    statisticsData.value = res.data
  })
  // dpcontRisk({ pageNum: 1, pageSize: 15 }).then((res) => {
  //   riskWarning.value = res.data.list
  //
  //   nextTick(() => {
  //     initWrapScrollAnime()
  //   })
  // })

  riskTypeSortRisk().then((res) => {
    riskWarning.value = res.data
    nextTick(() => {
      //initWrapScrollAnime()
    })
  })
  dpcontTodayAdd().then((res) => {
    toDayList.value = res.data
  })
  statisticsRight().then((res) => {
    statisticsRightData.value = res.data
  })
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', setHtmlFontSize)

  clearInterval(scrollAnimeState.addUserTimer)
  clearInterval(scrollAnimeState.wrapTimer)
  scrollAnimeState.wrapTimer = null
  scrollAnimeState.addUserTimer = null
})

function initAddUserScrollAnime() {
  const ul = document.querySelector<HTMLDivElement>('.adduser ul')

  const ls =
    document.querySelectorAll<HTMLDivElement>('.adduser li')?.length / 2 + 1
  let i = 0

  ul!.style.transition = 'all 1s ease'

  scrollAnimeState.addUserTimer = setInterval(() => {
    if (!ul) return
    i++
    if (i >= ls) {
      i = 1
      ul.style.marginTop = '0'
      ul.style.marginTop = `${-'.52' * i + 'rem'}`
      // $('.wrap ul').css({ marginTop: 0 })
      // $('.wrap ul').animate({ marginTop: -'.52' * i + 'rem' }, 1000)
    }
    // $('.wrap ul').animate({ marginTop: -'.52' * i + 'rem' }, 1000)
    ul.style.marginTop = `${-'.52' * i + 'rem'}`
  }, 2400)
}

const hideTheScrollbar = ref(false)
const handleMouseEnter = () => {
  console.log('鼠标移入')
  clearInterval(scrollAnimeState.wrapTimer)
  hideTheScrollbar.value = true
}

const handleMouseLeave = () => {
  console.log('鼠标移出')
  initWrapScrollAnime()
  hideTheScrollbar.value = false
}

//风险预警
function initWrapScrollAnime() {
  const ul = document.querySelector<HTMLDivElement>('.wrap ul')

  const ls =
    document.querySelectorAll<HTMLDivElement>('.wrap li')?.length / 2 + 1
  console.log('ls', document.querySelectorAll<HTMLDivElement>('.wrap li'))
  let i = 0

  ul!.style.transition = 'all 1s ease'

  scrollAnimeState.wrapTimer = setInterval(() => {
    if (!ul) return
    i++
    if (i >= ls) {
      i = 1
      ul.style.marginTop = '0'
      ul.style.marginTop = `${-'.42' * i + 'rem'}`
      // $('.wrap ul').css({ marginTop: 0 })
      // $('.wrap ul').animate({ marginTop: -'.42' * i + 'rem' }, 1000)
    }
    // $('.wrap ul').animate({ marginTop: -'.42' * i + 'rem' }, 1000)
    ul.style.marginTop = `${-'.42' * i + 'rem'}`
  }, 2400)
}
</script>

<style scoped lang="scss">
@charset "utf-8";
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.box {
  padding: 0px;
  margin: 0px;
  color: #222;
  font-family: '微软雅黑';
  position: relative;
}
.box {
  //background: #000d4a url(@/assets/images/bg.jpg) center top;
  background-size: cover;
  color: #666;
  font-size: 0.1rem;
}
.box-bg {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}
li {
  list-style-type: none;
}
table {
}
i {
  margin: 0px;
  padding: 0px;
  text-indent: 0px;
}
img {
  border: none;
  max-width: 100%;
}
a {
  text-decoration: none;
  color: #399bff;
}
a.active,
a:focus {
  outline: none !important;
  text-decoration: none;
}
ol,
ul,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  padding: 0;
  margin: 0;
}
a:hover {
  color: #06c;
  text-decoration: none !important;
}

.clearfix:after,
.clearfix:before {
  display: table;
  content: ' ';
}
.clearfix:after {
  clear: both;
}
.pulll_left {
  float: left;
}
.pulll_right {
  float: right;
}
/*谷哥滚动条样式*/

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  position: absolute;
}
::-webkit-scrollbar-thumb {
  background-color: #5bc0de;
}
::-webkit-scrollbar-track {
  background-color: #ddd;
}

/***/

.loading {
  position: fixed;
  left: 0;
  top: 0;
  font-size: 0.3rem;
  z-index: 100000000;
  width: 100%;
  height: 100%;
  background: #1a1a1c;
  text-align: center;
}
.loadbox {
  position: absolute;
  width: 160px;
  height: 150px;
  color: #324e93;
  left: 50%;
  top: 50%;
  margin-top: -100px;
  margin-left: -75px;
}
.loadbox img {
  margin: 10px auto;
  display: block;
  width: 40px;
}

.copyright {
  background: rgba(19, 31, 64, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.05);
  line-height: 0.5rem;
  text-align: center;
  padding-right: 15px;
  bottom: 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.16rem;
}

.head {
  height: 1.05rem;
  background: url(@/assets/images/head_bg.png) no-repeat center center;
  background-size: 100% 100%;
  position: relative;
}
.head h1 {
  color: #fff;
  text-align: center;
  font-size: 0.42rem;
  line-height: 0.75rem;
}
.head h1 img {
  width: 1.5rem;
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.2rem;
}
.weather {
  position: absolute;
  right: 0.3rem;
  top: 0;
  line-height: 0.75rem;
}
.weather img {
  width: 0.37rem;
  display: inline-block;
  vertical-align: middle;
}
.weather span {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.18rem;
  padding-right: 0.1rem;
}

.mainbox {
  padding: 0rem 0.4rem 0rem 0.4rem;
}
.mainbox > ul {
  margin-left: -0.4rem;
  margin-right: -0.4rem;
}
.mainbox > ul > li {
  float: left;
  padding: 0 0.4rem;
}
.mainbox > ul > li {
  width: 30%;
}
.mainbox > ul > li:nth-child(2) {
  width: 40%;
}

.boxall {
  border: 1px solid rgba(25, 186, 139, 0.17);
  padding: 0 0.3rem 0.3rem 0.3rem;
  background: rgba(255, 255, 255, 0.04) url(@/assets/images/line.png);
  background-size: 100% auto;
  position: relative;
  margin-bottom: 0.1rem;
  z-index: 10;
}
.boxall:before,
.boxall:after {
  position: absolute;
  width: 0.1rem;
  height: 0.1rem;
  content: '';
  border-top: 2px solid #02a6b5;
  top: 0;
}
.boxall:before,
.boxfoot:before {
  border-left: 2px solid #02a6b5;
  left: 0;
}
.boxall:after,
.boxfoot:after {
  border-right: 2px solid #02a6b5;
  right: 0;
}
.alltitle {
  font-size: 0.2rem;
  color: #fff;
  text-align: left;
  line-height: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.boxfoot {
  position: absolute;
  bottom: 0;
  width: 100%;
  left: 0;
}
.boxfoot:before,
.boxfoot:after {
  position: absolute;
  width: 0.1rem;
  height: 0.1rem;
  content: '';
  border-bottom: 2px solid #02a6b5;
  bottom: 0;
}

.bar {
  background: rgba(101, 132, 226, 0.1);
  padding: 0.15rem;
}
.barbox li,
.barbox2 li {
  width: 50%;
  text-align: center;
  position: relative;
}
.barbox:before,
.barbox:after {
  position: absolute;
  width: 0.3rem;
  height: 0.1rem;
  content: '';
}
.barbox:before {
  border-left: 2px solid #02a6b5;
  left: 0;
  border-top: 2px solid #02a6b5;
}
.barbox:after {
  border-right: 2px solid #02a6b5;
  right: 0;
  bottom: 0;
  border-bottom: 2px solid #02a6b5;
}

.barbox li:first-child:before {
  position: absolute;
  content: '';
  height: 50%;
  width: 1px;
  background: rgba(255, 255, 255, 0.2);
  right: 0;
  top: 25%;
}

.barbox {
  border: 1px solid rgba(25, 186, 139, 0.17);
  position: relative;
}
.barbox li {
  font-size: 0.6rem;
  color: #ffeb7b;
  padding: 0.05rem 0;
  font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif';
  font-weight: bold;
}
.barbox2 li {
  font-size: 0.19rem;
  color: #637c9f;
  padding-top: 0.1rem;
}

.map {
  //position: absolute;
  height: 7.2rem;
  //width: 40%;
  //z-index: 9;
  //top: 0;
  //top: 6rem;
  //left: 50%;
  //box-sizing: border-box;
  //transform: translateX(-50%);
  margin-top: 1rem;
}

.map .map-bg {
  width: 100%;
  position: absolute;
  bottom: 0;
}

.map .map-bg img {
  width: 100%;
}

.map-m {
  width: 100%;
  //position: absolute;
  //bottom: 0;
  //bottom: 5%;
  //left: 50%;
  //transform: translateX(-50%);
  display: flex;
  justify-content: center;
}

.map-m img {
  width: 60%;
}

.map4 {
  width: 200%;
  height: 7rem;
  position: relative;
  left: -50%;
  top: 4%;
  margin-top: 0.2rem;
  z-index: 5;
}
.map1,
.map2,
.map3 {
  position: absolute;
}
.map1 {
  width: 6.43rem;
  z-index: 2;
  top: 0.45rem;
  left: 0.4rem;
  animation: myfirst2 15s infinite linear;
}
.map2 {
  width: 5.66rem;
  top: 0.85rem;
  left: 0.77rem;
  z-index: 3;
  opacity: 0.2;
  animation: myfirst 10s infinite linear;
}
.map3 {
  width: 5.18rem;
  top: 1.07rem;
  left: 1.13rem;
  z-index: 1;
}

#echarts1,
#echarts2,
#echarts3,
#echarts6,
#echarts7,
#echarts8 {
  position: relative;
}
#echarts1:before,
#echarts2:before,
#echarts3:before,
#echarts6:before,
#echarts7:before,
#echarts8:before {
  position: absolute;
  content: '23124';
  width: 100%;
  text-align: center;
  bottom: 0.15rem;
  color: #fff;
  opacity: 0.7;
  font-size: 0.18rem;
}

#echarts1:before {
  content: '红色（高风险）';
}
#echarts2:before {
  content: '橙色（中风险）';
}
#echarts3:before {
  content: '蓝色（低风险）';
}

#echarts6:before {
  content: '注销社会组织';
}
#echarts7:before {
  content: '新增社会组织';
}
#echarts8:before {
  content: '社会组织变更';
}

.tabs {
  text-align: center;
  padding: 0.1rem 0 0 0;
}
.tabs a {
  position: relative;
  display: inline-block;
  margin-left: 1px;
  padding: 0.05rem 0.2rem;
  color: #898989;
  transition: all 0.3s ease-out 0s;
  font-size: 14px;
}
.tabs li {
  display: inline-block;
}
.tabs a:after {
  position: absolute;
  width: 1px;
  height: 10px;
  background-color: rgba(255, 255, 255, 0.1);
  content: '';
  margin-left: 0;
  right: -1px;
  margin-top: 7px;
}
.tabs li a.active {
  border: 1px solid rgba(25, 186, 139, 0.17);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}

.tit02 {
  text-align: center;
  margin: 0.1rem 0;
  position: relative;
}
.tit02 span {
  border: 1px solid rgba(25, 186, 139, 0.17);
  letter-spacing: 2px;
  padding: 0.01rem 0.2rem;
  background: rgba(255, 255, 255, 0.05);
  font-size: 0.18rem;
  color: #49bcf7;
}
.tit02:before,
.tit02:after {
  position: absolute;
  width: 26%;
  height: 1px;
  background: rgba(25, 186, 139, 0.2);
  content: '';
  top: 0.12rem;
}
.tit02:after {
  right: 0;
}
.tit02:before {
  left: 0;
}

.wrap {
  height: 1.34rem;
  overflow: hidden;
  //background: red;
}
.wrap li {
  line-height: 0.42rem;
  height: 0.42rem;
  font-size: 0.18rem;
  text-indent: 0.24rem;
  //margin-bottom: 0.1rem;
  display: flex;
  align-items: center;
}
.wrap li p {
  border: 1px solid rgba(25, 186, 139, 0.17);
  color: rgba(255, 255, 255, 0.6);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;
  cursor: pointer;
}
.wrap-label {
  flex: 1;
  text-align: left;
}
.wrap-num {
  width: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-indent: 0;
}
.wrap-header {
  width: 100%;
  display: flex;
  align-items: center;
  background: rgba(52, 134, 218, 0.2);
  .wrap-header-label {
    flex: 1;
    height: 0.42rem;
    border: 1px solid rgba(25, 186, 139, 0.17);
    color: rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.18rem;
  }
  .wrap-header-num {
    width: 1.2rem;
    height: 0.42rem;
    border: 1px solid rgba(25, 186, 139, 0.17);
    color: rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.18rem;
  }
}
.sy {
  float: left;
  width: 33%;
  height: 2.2rem;
  margin-top: -0.25rem;
}

.adduser {
  height: 1.5rem;
  overflow: hidden;
}
.adduser li {
  height: 0.5rem;
}
.adduser img {
  width: 0.4rem;
  border-radius: 0.5rem;
  margin-right: 0.1rem;
  display: inline-block;
  vertical-align: middle;
}
.adduser span {
  line-height: 0.5rem;
  font-size: 0.18rem;
  color: rgba(255, 255, 255, 0.6);
}

.sycm ul {
  margin-left: -0.5rem;
  margin-right: -0.5rem;
  padding-top: 0.07rem;
}
.sycm li {
  float: left;
  width: 33.33%;
  text-align: center;
  position: relative;
}
.sycm li:before {
  position: absolute;
  content: '';
  height: 30%;
  width: 1px;
  background: rgba(255, 255, 255, 0.1);
  right: 0;
  top: 15%;
}
.sycm li:last-child:before {
  width: 0;
}

.sycm li h2 {
  font-size: 0.15rem;
  color: #c5ccff;
}
.sycm li span {
  font-size: 0.15rem;
  color: #fff;
  opacity: 0.5;
}

@keyframes myfirst2 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

@keyframes myfirst {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-359deg);
  }
}
.grade {
  width: 20px;
  height: 20px;
}
.boxall-teble {
  width: 100%;
  height: 1.8rem;
  overflow-y: scroll;
  .table-title {
    font-weight: 500;
    font-size: 0.15rem;
    color: #333333;
    text-align: center;
    //margin-bottom: 30px;
  }

  table {
    border-collapse: collapse;
    width: 100%;
    margin-top: 8px;
  }
  table {
    border: 2px double rgba(52, 134, 218, 0.2); /* 外边框的双边框样式 */
  }
  th,
  td {
    border: 1px solid rgba(52, 134, 218, 0.2);
    //padding: 1px;
    & > div {
      height: 100%;
      //border: 1px solid rgba(52, 134, 218, 0.2);
      & > img {
        width: 0.34375rem;
        height: 0.229rem;
      }
    }
  }
  thead {
    background: rgba(52, 134, 218, 0.2);
  }
  th,
  td {
    min-height: 0.458rem;
    text-align: center;
    font-size: 0.1375rem;
    color: #b8bbcf;
  }
  td {
    & > div {
      padding: 0.125rem 6px;
    }
  }
  th {
    background: rgba(52, 134, 218, 0.8) !important;
  }
}
.boxall-teble::-webkit-scrollbar {
  display: none; /* 隐藏滚动条 */
}
.boxall-statistics {
  width: 100%;
  display: flex;
  padding-top: 0.1rem;
  justify-content: space-around;
  .boxall-statistics-item {
    width: 1.075rem;
    position: relative;
    .boxall-statistics-title {
      background-image: url('@/assets/images/popup/d3.png');
      background-size: 100% 100%;
      margin-bottom: 0rem;
      width: 100%;
      height: 0.24rem;
      font-family: SourceHanSansCN, SourceHanSansCN;
      font-weight: bold;
      font-size: 0.106rem;
      color: #daeef9;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .boxall-statistics-c {
      width: 100%;
      height: 0.575rem;
      background-image: url('@/assets/images/popup/d1.png');
      background-size: 100% 100%;
      .boxall-statistics-c-tx {
        font-family: Adobe Heiti Std;
        font-size: 0.23rem;
        color: #f4fdff;
        width: 100%;
        text-align: center;
        span {
          font-size: 0.105rem;
        }
      }
    }
  }
}
#organizationalScoring {
  width: 100%;
  height: 1rem;
  margin-top: 0.1rem;
}

.hideTheScrollbar {
  -ms-overflow-style: none; /* IE 和 Edge */
  scrollbar-width: none; /* Firefox */
  overflow: -moz-scrollbars-none; /* Older Firefox browsers */
  overflow-y: scroll;
}

.hideTheScrollbar::-webkit-scrollbar {
  display: none; /* 隐藏滚动条 */
}
.registrationManagement {
  box-sizing: border-box;
  padding: 0 0.2rem;
  div {
    width: calc(100% - 0.2rem);
    margin: 0 auto;
    background-image: url('@/assets/images/popup/d3.png');
    background-size: 100% 100%;
    box-sizing: border-box;
    height: 0.3rem;
    font-weight: bold;
    font-size: 0.106rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #daeef9;
    margin-top: 0.05rem;
  }
  li:before {
    top: 50%;
    transform: translateY(-50%);
  }
}
.regulatoryPerformance {
  li {
    padding-top: 0.1rem;
  }
  h2 {
    font-size: 0.2rem !important;
  }
}
//.riskWarningClassification {
//  h2 {
//    background-image: url('@/assets/images/站台1.png');
//    background-size: 100% 100%;
//  }
//}
.riskWarningClassification {
  & > ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    li {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }
    h2 {
      background-image: url('@/assets/images/站台1.png');
      background-size: 100% 100%;
      height: 0.5rem;
      width: 0.5rem;
      position: relative;
      div {
        width: 100%;
        height: 0.2rem;
        font-size: 0.2rem;
        color: #c5ccff;
        position: absolute;
        top: 0.1rem;
        text-align: center;
      }
    }
    .riskWarningClassification-tx {
      width: 1rem;
      font-size: 0.14rem;
      color: #fff;
      opacity: 0.5;
      text-align: center;
    }
  }
}
.riskDisposal {
  padding-top: 0.1rem;
  transform: translateX(0.2rem);
  & > ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 0rem;
    li {
      display: flex;
      align-items: center;
      .imgs {
        width: 0.4rem;
        height: 0.4rem;
        background: #1c397b;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        img {
          width: 60%;
          height: 60%;
        }
      }
      .riskDisposal-r {
        flex: 1;
        min-width: 0;
        display: flex;
        justify-content: center;
        flex-direction: column;
        margin-left: 0.1rem;
        h2 {
          font-size: 0.2rem;
          color: #c5ccff;
          margin-bottom: 0.05rem;
        }
        div {
          font-size: 0.1rem;
          color: #fff;
          opacity: 0.5;
        }
      }
    }
  }
}
.annualInspections {
  padding-top: 0.1rem;
  & > ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 0.1rem;
    li {
      width: 0.83rem;
      height: 0.83rem;
      background-image: url('@/assets/images/6.png');
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      margin: 0 auto;
      h2 {
        font-size: 0.15rem;
        color: #c5ccff;
        margin-bottom: 0.05rem;
      }
      span {
        font-size: 0.1rem;
        color: #fff;
        opacity: 0.5;
      }
    }
  }
}
</style>
